<template>
  <el-card class="weekly-list" v-loading="fetchLoading">
    <div slot="header" class="clearfix">
      <span>本年月报记录</span>
    </div>
    <ul v-if="weekRecords.length">
      <li v-for="(record, index) in weekRecords" :key="index">
        <div class="item-title">
          <span class="week">{{ record.week }}月</span>
          <span class="week__range">{{ record.week_range }}</span>
        </div>
        <div v-if="record.currentWeeks.length" style="margin-bottom: 8px">
          <div class="title current">最满意的工作及亮点</div>
          <span
            v-for="(cWeek, cindex) in record.currentWeeks"
            :key="cindex"
            class="content"
            v-html="`${cindex + 1}、${cWeek}` "
          />
        </div>
        <div v-if="record.nextWeeks.length">
          <div class="title next">最不满意的工作及整改措施</div>
          <span
            v-for="(nWeek, nindex) in record.nextWeeks"
            :key="nindex"
            class="content"
             v-html="`${nindex + 1}、${nWeek}` "
          />
        </div>
      </li>
    </ul>
    <el-empty v-else description="暂无数据"></el-empty>
  </el-card>
</template>
<script>
import { mapGetters } from "vuex";

import moment from 'moment'
import { groupBy } from "@/utils/index.js";

import { getWeekSchedule } from "@/api/plann.js";

export default {
  name: "CurrentYearMonthPlan",
  props: {
    selectedUserId: {
      type: String,
    },
    date: {
      type: String,
    },
  },
  computed: {
    ...mapGetters(["name", "id"]),
  },
  watch: {
    selectedUserId(value) {
      this.fetchMonthlyPlanList();
    },
    date: {
      handler() {
        this.fetchMonthlyPlanList();
      },
      immediate: true,
    },
  },
  mounted() {
    this.fetchMonthlyPlanList();
  },
  data() {
    return {
      weekRecords: [],
      fetchLoading: false
    };
  },
  methods: {
    /**
     * 请求本年月报记录
     */
    async fetchMonthlyPlanList() {
      this.fetchLoading = true
      const param = {
        type: "月",
        user: this.selectedUserId || this.id,
        date_start: moment(this.date || new Date())
          .startOf("year")
          .format("YYYY-MM-DD"),
        date_end: moment(this.date || new Date())
          .endOf("year")
          .format("YYYY-MM-DD"),
      };
      try {
        const { data: result = {} } = await getWeekSchedule(param);
        const { data } = result
        const mergeList = this.mergeWeekRecord(data);
        this.weekRecords = mergeList;
        this.fetchLoading = false
      } catch (error) {
        this.fetchLoading = false
      }
    },
    /**
     * 将每周工作分别放入本周和下周工作记录数组
     */
    mergeWeekRecord(data = []) {
      const result = [];
      data.forEach((weekData) => {
        const { records, week_date } = weekData;
        const { week_range } = records[0];
        let currentWeeks = [];
        let nextWeeks = [];
        records.forEach((record) => {
          const { current_week, next_week } = record;
          current_week && currentWeeks.push(current_week.replace(/\n/g, '<br>'));
          next_week && nextWeeks.push(next_week.replace(/\n/g, '<br>'));
        });
        result.push({
          week: week_date,
          week_range,
          currentWeeks,
          nextWeeks,
        });
      });
      return result;
    },
  },
};
</script>
<style lang="scss">
.weekly-list {
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
      .item-title {
        margin-top: 8px;
        .week,
        .week__range {
          margin-bottom: 8px;
        }
        .week {
          display: block;
          font-size: 14px;
          font-weight: bold;
        }
        .week__range {
          display: inline-block;
          color: #999;
        }
      }
      .title {
        display: inline-block;
        padding: 2px 4px;
        margin: 0;
        font-size: 12px;
        border: 1px solid;
        border-color: currentColor;
      }

      .current {
        color: #1989fa;
      }
      .next {
        color: #67c23a;
      }
      .content {
        display: inline-block;
        width: 100%;
        padding: 5px 0;
      }
    }
  }
  .el-card__body {
    padding-top: 10px;
    overflow: auto;
    max-height: calc(80vh - 200px);
  }
}
</style>